<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理-事件修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <!--注意greet里传入的参数要有单引号-->

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="greet">:click.stop</a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit">submit.prevent</form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="greet">.stop.prevent</a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="greet">capture...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="greet">self...</div>

    <a v-on:click.once="greet">once=</a>
</div>


<script>
    var app= new Vue({
        el:'#app',
        data:{
            name: 'Vue.js'
        },
        methods:{
            greet:function (msg,event) {
                console.log(msg);
                console.log(event);
                if (event)
                    event.preventDefault();
                alert(msg);
            }
        }
    })
</script>
</body>
</html>
